<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
  name: 'PieMonthScore',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart1'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    dateData: {
      type: String,
      default: ''
    },
    monthScore: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    monthScore: {
      handler(newValue, oldValue) {
        this.initChart()
      },
      deep: true
    }
  },
  mounted() {
    if (typeof this.monthScore !== 'undefined' && this.monthScore != null && this.monthScore.length > 0) {
      this.initChart()
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const colorList = ['#f84343', '#f6aa57', '#8fbc8f', '#b272a6', '#00b9ff']
      const label = ['600以下', '600-650', '650-700', '700-750', '750以上']
      var Scoredata = []
      var obj0 = { name: '600以下', value: '', index: '0' }
      var obj1 = { name: '600-650', value: '', index: '1' }
      var obj2 = { name: '650-700', value: '', index: '2' }
      var obj3 = { name: '700-750', value: '', index: '3' }
      var obj4 = { name: '750以上', value: '', index: '4' }
      Scoredata.push(obj0)
      Scoredata.push(obj1)
      Scoredata.push(obj2)
      Scoredata.push(obj3)
      Scoredata.push(obj4)
      this.monthScore.forEach((item) => {
        var obj = { name: '', value: '', index: '' }
        obj.name = label[item.score - 1]
        obj.value = item.value
        obj.index = item.score - 1
        Scoredata.push(obj)
        // console.log(Scoredata)
      })
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        title: {
          text: this.dateData + '月评分分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/> {b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          data: label,
          left: '90%'
        },
        series: [
          {
            name: this.dateData + '月评分',
            type: 'pie',
            radius: '50%',
            data: Scoredata,
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              normal: {
                label: {
                  show: true,
                  formatter: '{b}: {c} ({d}%)'
                },
                labelLine: { show: true },
                color: function(params) {
                  return colorList[params.data.index]
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
